<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>UI组件之排序表格</title>
	<link rel="stylesheet" type="text/css" href="stylesheets/Table.css">
	<script src="/javascripts/jquery.js"></script>
</head>

<body>
	<div class="search">
		<form action="demo1/search" method="POST">
			<input type="text" required placeholder="请输入您想搜索的人名" name="name" />
			<input type="submit" required value="提交" />
		</form>
	</div>

	<table>
		<thead>
			<tr>
				<form action="" method="POST">
					<td><input type="text" name="name" required></td>
					<td><input type="text" name="Chinese" required></td>
					<td><input type="text" name="math" required></td>
					<td><input type="text" name="English" required></td>
					<td><input type="submit"></td>
				</form>
			</tr>
			<tr>
				<td>姓名</span></td>
				<td>语文<span class="upBtn"></span><span class="downBtn"></td>
				<td>数学<span class="upBtn"></span><span class="downBtn"></td>
				<td>英语<span class="upBtn"></span><span class="downBtn"></td>
				<td>总分<span class="upBtn"></span><span class="downBtn"></td>
			</tr>
		</thead>
		<tbody id="Change">
			<% for (let i of detial) { %>
				<tr>
					<td>
						<%= i.name %>
					</td>
					<td>
						<%=i.Chinese %>
					</td>
					<td>
						<%=i.math %>
					</td>
					<td>
						<%=i.English %>
					</td>
					<td>
						<%=i.total %>
					</td>
					<td><input type="button" value="删除" onclick="deletTr(this)" formaction="" formmethod="POST" /></td>
					<td><input type="button" value="更改" onclick="change(this)" /></td>
				</tr>
				<% } %>
		</tbody>
		<tfoot>
			<td colspan="6">
				<input type="button" value="上一页" id="lastPage">
				<% for (let i=1 ; i<=Allpages ; i++ ){ %>
					<input type="button" class="pages" value=<%=i %> >
					<% } %>
						<input type="button" value="下一页" id="nextPage">
			</td>
		</tfoot>
	</table>
	<div id="change" class="change">
		<div class="inside">
			<div class="false" id="false">X</div>
			<form action="demo1/change" method="POST">
				<input type="text" placeholder="请输入您的名字" required name="name">
				<input type="text" placeholder="请输入语文成绩" required name="Chinese">
				<input type="text" placeholder="请输入数学成绩" required name="math">
				<input type="text" placeholder="请输入英语成绩" required name="English">
				<input type="submit" value="确定">
			</form>
		</div>
	</div>
	<script type="text/javascript" src="javascripts/Table.js"></script>
	<script>
		$("#nextPage").click(function () {
			let name = (this.parentElement.parentElement.parentElement.parentElement.children[1].children[0].children[0].innerHTML)
			$.ajax({
				type: "post",
				url: "http://localhost:3000/demo1/nextPage/"+name,
				success: function (data) {
					document.getElementById("Change").innerHTML = data.map(i =>
						`<tr>
				<td>${i.name}</td>
				<td>${i.Chinese}</td>
				<td>${i.math}</td>
				<td>${i.English}</td>
				<td>${i.total}</td>
				<td><input type="button" value="删除" onclick="deletTr(this)" formaction="" formmethod="POST"/></td>
				<td><input type="button" value="更改" onclick="change(this)"/></td>
			</tr>`).join("");
				}
			});
		})
		$("#lastPage").click(function () {
		let name = (this.parentElement.parentElement.parentElement.parentElement.children[1].children[0].children[0].innerHTML)
			$.ajax({
				type: "post",
				url: "http://localhost:3000/demo1/lastPage/"+name,
				success: function (data) {
						document.getElementById("Change").innerHTML = data.map(i =>
							`<tr>
				<td>${i.name}</td>
				<td>${i.Chinese}</td>
				<td>${i.math}</td>
				<td>${i.English}</td>
				<td>${i.total}</td>
				<td><input type="button" value="删除" onclick="deletTr(this)" formaction="" formmethod="POST"/></td>
				<td><input type="button" value="更改" onclick="change(this)"/></td>
			</tr>`).join("");
				}
			})
		})
		$(".pages").click(function () {
			$.ajax({
				type: "post",
				url: "http://localhost:3000/demo1/page/" + this.value,
				success: function (data) {
						document.getElementById("Change").innerHTML = data.map(i =>
							`<tr>
				<td>${i.name}</td>
				<td>${i.Chinese}</td>
				<td>${i.math}</td>
				<td>${i.English}</td>
				<td>${i.total}</td>
				<td><input type="button" value="删除" onclick="deletTr(this)" formaction="" formmethod="POST"/></td>
				<td><input type="button" value="更改" onclick="change(this)"/></td>
			</tr>`).join("");
				}
			})
		})
	</script>
</body>

</html>